<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>图片放大</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="./js/jquery-1.12.4.min.js"></script>
</head>

<style type="text/css">
    .setPops {
        width: 70%;
        position: absolute;
        left: 15%;
        top: 50%;
        z-index: 10;
        overflow: hidden;
        display: none;
    }
    
    .filterPop {
        background: rgba(0, 0, 0, .5);
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9;
        overflow: hidden;
        display: none;
    }
</style>

<body>

    <img onclick="fun(this)" src="./images/slider-blog-thumb-1.jpg" alt="" width="50%" height="50%">
    <div class="filterPop" onclick="toHide()"></div>
    <div class="setPops">
        <img src="" alt="" width="100%" height="100%">
    </div>



    <!-- 引用页面js -->
    <script type="application/javascript">
        function fun(obj) {
            var setPopsWidth = $(".setPops").width();
            $(".setPops, .filterPop").fadeIn();
            $(".setPops").css({
                height: setPopsWidth,
                marginTop: -setPopsWidth / 2 + "px"
            });
            $(".setPops").children("img")[0].src = obj.src;
        }

        function toHide() {
            $(".setPops, .filterPop").fadeOut()
        }
    </script>
</body>


</html>